<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f1(){
            console.log("当用户使用鼠标双击某个元素时触发");
        }
        function f2(){
            console.log("当鼠标按钮被按下时触发");
        }
        function f3(){
            console.log("当鼠标被移动时触发");
        }
        function f4(){
            console.log("当鼠标的按键被松开时触发");
        }
        // keydown--->keypress--->keyup
        function a(){
            console.log("keydown:当键盘上某个按键被按下时触发,识别键盘上任意按钮");
        }
        function b(){
            console.log("keypress:当键盘上某个按键被按下时触发,不识别功能键");
        }
        function c(){
            console.log("keyup:当键盘上某个按键被松开时触发");
        }

        function f5(){
            console.log("下拉列表的选项内容发生了改变");
        }
        function doFocus(){
            console.log("获得焦点的时候");
        }
        function doBlur(){
            console.log("失去焦点的时候");
        }
    </script>
</head>
<body>
    <div ondblclick="f1()">我是div</div>
    <input type="button" value="按钮" onmousedown="f2()" onmouseup="f4()">
    <input type="button" value="按钮" onmousemove="f3()">
    <input type="text" onkeydown="a()" onkeypress="b()" onkeyup="c()">
    <br>
    <select onchange="f5()">
        <option value="1">huahua</option>
        <option value="2">hei</option>
        <option value="3">haha</option>
    </select>
    <br>
    <input type="text" onfocus="doFocus()" onblur="doBlur()">
</body>
</html>